import React, { useEffect, useState } from 'react';
import { NavBar, Space, Toast, Popup, Radio } from 'antd-mobile';
import { StarOutline } from 'antd-mobile-icons';
import '../index.less';
import { history } from 'umi';

export default function Work() {
  let [ls, setLs] = useState([1, 2, 3, 4, 5, 6, 7, 8]);
  let [visible, setVisible] = useState(false);
  const right = (
    <div style={{ fontSize: 24 }}>
      <Space style={{ margin: '0 1.5rem 0 0' }}>
        <StarOutline />
      </Space>
    </div>
  );

  let back = () => {
    history.push('/home');
  };


  return (
    <div>
      {/* 底部弹出框 */}
      <Popup
        visible={visible}
        showCloseButton
        onClose={() => {
          setVisible(false);
        }}
        bodyStyle={{
          borderTopLeftRadius: '8px',
          borderTopRightRadius: '8px',
          minHeight: '40vh',
        }}
      >
        <div className="newTz">
          <h2>选择拍摄服装套数</h2>
          <Radio.Group>
            <div className="ttt">
              3-4套
              <span className="newspan">87%人选择</span>
              <Radio
                value="1"
                style={{
                  '--icon-size': '22px',
                  '--font-size': '16px',
                  '--gap': '8px',
                  marginLeft: '1.45rem',
                }}
              />
            </div>
            <div className="ttt">
              5-6套
              <span></span>
              <Radio
                value="2"
                style={{
                  '--icon-size': '22px',
                  '--font-size': '16px',
                  '--gap': '8px',
                }}
              />
            </div>
            <div className="ttt">
              6套以上
              <span></span>
              <Radio
                value="3"
                style={{
                  '--icon-size': '22px',
                  '--font-size': '16px',
                  '--gap': '8px',
                  marginRight: '0.1rem',
                }}
              />
            </div>
          </Radio.Group>
          <button>立即查询报价</button>
        </div>
      </Popup>
      {/* 顶部 */}
      <NavBar className="newtop1" right={right} onBack={back}>
        <span style={{ marginLeft: '-0.5rem' }}>哈尼婚纱摄影工作室</span>
      </NavBar>
      {/* 渲染数据 */}
      <div className="newdatas">
        <img src={require('./imgs/Snipaste_2023-03-02_14-39-19.png')} />
        <div className="card">
          <h2>不可或缺的明治汉服婚纱照</h2>
          <p>
            <span>
              <span
                style={{
                  color: '#ff264a',
                  fontSize: '0.4rem',
                  fontWeight: '600',
                }}
              >
                ￥199-6899
              </span>
              &nbsp;
              <span style={{ color: '#b39999', fontSize: '0.34rem' }}>
                服务报价
              </span>
            </span>
            <button onClick={() => setVisible(true)}>咨询详细报价</button>
          </p>
          <div style={{width:"100%",textAlign:'center'}}>
            {ls.map((i, idx) => {
              return (
                <img
                  style={{ margin: '0.05rem 0 0 0', width: '97%' }}
                  key={idx}
                  src={require('./imgs/微信图片_20230302143631.jpg')}
                />
              );
            })}
          </div>
        </div>
      </div>

      {/* 分享图标 */}
      <span className="shareimg">
        <img src={require('./imgs/分享.svg')} />
        分享
      </span>
      {/* 底部 */}
      <div className="newbut">
        <span>
          <img src={require('./imgs/首页.svg')} />
          店铺
        </span>
        <span>
          <img src={require('./imgs/电话.svg')} style={{ width: '0.5rem' }} />
          店铺
        </span>
        <span>
          <img src={require('./imgs/货主端询报价.svg')} />
          报价
        </span>
        <button>
          <img
            src={require('./imgs/消息 (2).svg')}
            style={{ margin: '0 0.1rem 0 0' }}
          />
          在线咨询
        </button>
      </div>
    </div>
  );
}
